<template>
	<view class="popularquestions-content" @click="goquestiondetails(popularquestionscontent)">
		<view class="popularquestions-content-header" :class="popularquestionscontent.title==''?'header-nav-bottom':''">
			<span>{{popularquestionscontent.title}}</span>
			<img :src="queryIconImage('modelone1')" alt="" class="header-nav-img">
			<img :src="popularquestionscontent.type=='悬赏提问'&&popularquestionscontent.answer_type=='公开参与'? queryIconImage('questondetalogo1') : queryIconImage('modelone1')"
				alt="" class="header-nav-img">
		</view>
		<view class="content-header-text" v-if="popularquestionscontent.content">
			<span>{{popularquestionscontent.content}}</span>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "popularquestionsCard",
		props: {
			popularquestionscontent: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				contenttext: "想要自学，也想找老师。但无法发现自己的错误并及时纠正。所以想要了解有什么方法可以系统学钢琴，如何规划想要自学，也想找老师。但无法发现自己的错误并及时纠正。所以想要了解有什么方法可以系统学钢琴，如何规划..."
			};
		},
		computed: {
			...mapState({
				headericon: state => state.remote?.headericon?.data_list ?? [],
			})
		},
		methods: {
			queryIconImage(label, key = "headericon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			goquestiondetails(data) {
				let id = data.id
				this.$emit("goquestiondetails", id)
			}
		}
	}
</script>

<style lang="scss">
	.popularquestions-content {
		width: 100%;
		// height: 200rpx;
		border-bottom: 1rpx solid #dcdcdc;
		box-sizing: border-box;
		padding: 26rpx 28rpx 0 20rpx;

		.header-nav-bottom {
			margin-bottom: 40rpx !important;
		}

		.popularquestions-content-header {
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
			font-weight: 500;
			color: #4A4A4A;
			line-height: 42rpx;
			display: flex;
			align-items: center;
			margin-bottom: 22rpx;

			.header-nav-img {
				width: 32rpx;
				height: 32rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-left: 15rpx;
			}
		}

		.content-header-text {
			font-size: 30rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			line-height: 42rpx;
			margin-bottom: 32rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
	}
</style>